const darkMagic = 'head > .changed { --whatever: 100%; }';
function insertMagicRule(styleSheet: CSSStyleSheet) {
  styleSheet.insertRule(darkMagic, 0);
  return true;
}

function isStyleRule(cssRule: CSSRule) {
  return cssRule.type === CSSRule.STYLE_RULE;
}

function hasMagicSelector(cssRule: CSSStyleRule) {
  return 'head > .changed' === cssRule.selectorText;
}

function hasMagicProp$Value(cssRule: CSSStyleRule) {
  return ' 100%' === cssRule.style.getPropertyValue('--whatever');
}

export function isUnmarked(styleSheet: CSSStyleSheet): boolean {
  const cssRule = styleSheet.cssRules[0];
  if (!isStyleRule(cssRule)) {
    // console.log(
    //   'debug dectected unmarked style sheet by',
    //   'Quick CSSRule Type Check',
    //   styleSheet
    // );
    return insertMagicRule(styleSheet);
  }

  const cssStyleRule = cssRule as CSSStyleRule;
  if (!hasMagicSelector(cssStyleRule) || !hasMagicProp$Value(cssStyleRule)) {
    return insertMagicRule(styleSheet);
  }

  // if (!hasMagicSelector(cssStyleRule)) {
  //   console.log(
  //     'debug dectected unmarked style sheet by',
  //     'Magic CSS Selector Check',
  //     styleSheet
  //   );
  //   return insertMagicRule(styleSheet);
  // }
  // if (!hasMagicProp$Value(cssStyleRule)) {
  //   console.log(
  //     'debug dectected unmarked style sheet by',
  //     'Magic CSS Declarition Check',
  //     styleSheet
  //   );
  //   return insertMagicRule(styleSheet);
  // }

  return false;
}
